//@ts-nocheck
import React, { useState, useEffect } from 'react'
import { Tooltip } from 'antd'
import './index.less'

const TriangleChart = ({
  max,
  xAxisMinText,
  xAxisMaxText,
  yAxisMaxText,
  points,
  width,
  tooltip
}) => {
  const [showPointsList, setShowPoints] = useState<any>([])
  const [centerHeight, setCenterHeight] = useState(0)
  const axis = [0, 0.2, 0.4, 0.6, 0.8, 1]

  useEffect(() => {
    const temp = Math.sqrt(Math.pow(max, 2) - Math.pow(max / 2, 2))

    setCenterHeight((width * temp) / max)
    setShowPoints(
      points?.map((point) => {
        return {
          ...point,
          x: (point.x / max) * 100,
          y: (point.y / temp) * 100,
          title: point.title
        }
      })
    )
  }, [max, points, width])

  return (
    <div style={{ width: width, height: '100%', margin: '0 auto' }}>
      <div className="triang-chart-wrapper">
        <div className="triang-chart">
          <div className="first-line">
            {axis.map((i) => {
              return <span key={i}>{i}</span>
            })}
            <span className="text">{xAxisMaxText}</span>
          </div>
          <div className="second-line">
            <span className="text">{xAxisMinText}</span>
            {axis.reverse().map((i) => {
              return <span key={i}>{i}</span>
            })}
          </div>
          <div className="third-line">
            <span className="text">{yAxisMaxText}</span>
            {axis.map((i) => {
              return <span key={i}>{i}</span>
            })}
          </div>
          <div className="point" style={{ height: centerHeight }}>
            {showPointsList?.map((point, index) => {
              return (
                <div
                  key={index}
                  className="point-item"
                  style={{ left: `${point.x}%`, top: `${point.y}%` }}
                >
                  <Tooltip
                    color="#fff"
                    title={() => {
                      return tooltip(point)
                    }}
                    placement="right"
                    overlayClassName='triang-chart-tooltip'
                  >
                    <span className="block">
                      <span className="circle" />
                    </span>
                  </Tooltip>
                  <span className="text">{point.title}</span>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default TriangleChart